<template>
	<view class="identity-apply">
		<!-- 导航栏 -->
		<!-- <u-navbar title="身份申请" :border-bottom="false" :background="{ backgroundColor: '#fff' }">
			<template #left>
				<u-icon name="arrow-left" size="20" @click="goBack"></u-icon>
			</template>
		</u-navbar> -->
		
		<!-- 当前身份信息 -->
		<view class="current-identity" v-if="userIdentity">
			<view class="identity-card">
				<view class="identity-header">
					<text class="identity-title">当前身份</text>
					<view class="identity-badge" :class="userIdentity.level">
						{{ getIdentityName(userIdentity.level) }}
					</view>
				</view>
				<view class="identity-info">
					<text class="info-text">认证时间：{{ formatTime(userIdentity.create_time) }}</text>
					<text class="info-text" v-if="userIdentity.expire_time">到期时间：{{ formatTime(userIdentity.expire_time) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 身份申请列表 -->
		<view class="apply-list">
			<view class="section-title">身份申请</view>
			
			<!-- 云主申请 -->
			<view class="apply-item" @click="applyIdentity('cloud_owner')">
				<view class="item-left">
					<view class="item-icon cloud-owner">
						<u-icon name="star-fill" size="24" color="#fff"></u-icon>
					</view>
					<view class="item-info">
						<text class="item-title">云主</text>
						<text class="item-desc">享受最高分润比例，专属客服支持</text>
					</view>
				</view>
				<view class="item-right">
					<text class="apply-fee">¥999</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
			
			<!-- 合伙人申请 -->
			<view class="apply-item" @click="applyIdentity('partner')">
				<view class="item-left">
					<view class="item-icon partner">
						<u-icon name="account-fill" size="24" color="#fff"></u-icon>
					</view>
					<view class="item-info">
						<text class="item-title">合伙人</text>
						<text class="item-desc">享受团队分润，发展下级代理</text>
					</view>
				</view>
				<view class="item-right">
					<text class="apply-fee">¥599</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
			
			<!-- 商家申请 -->
			<view class="apply-item" @click="applyIdentity('businessman')">
				<view class="item-left">
					<view class="item-icon businessman">
						<u-icon name="shop" size="24" color="#fff"></u-icon>
					</view>
					<view class="item-info">
						<text class="item-title">商家</text>
						<text class="item-desc">开设店铺，销售商品</text>
					</view>
				</view>
				<view class="item-right">
					<text class="apply-fee">¥299</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
			
			<!-- 供应商申请 -->
			<view class="apply-item" @click="applyIdentity('supplier')">
				<view class="item-left">
					<view class="item-icon supplier">
						<u-icon name="car" size="24" color="#fff"></u-icon>
					</view>
					<view class="item-info">
						<text class="item-title">供应商</text>
						<text class="item-desc">提供货源，批发销售</text>
					</view>
				</view>
				<view class="item-right">
					<text class="apply-fee">¥199</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
			
			<!-- 代理申请 -->
			<view class="apply-item" @click="applyIdentity('agent')">
				<view class="item-left">
					<view class="item-icon agent">
						<u-icon name="grid" size="24" color="#fff"></u-icon>
					</view>
					<view class="item-info">
						<text class="item-title">代理</text>
						<text class="item-desc">推广商品，获得佣金</text>
					</view>
				</view>
				<view class="item-right">
					<text class="apply-fee">免费</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 申请记录 -->
		<view class="apply-records" v-if="applyRecords.length > 0">
			<view class="section-title">申请记录</view>
			<view 
				v-for="(record, index) in applyRecords" 
				:key="index" 
				class="record-item"
			>
				<view class="record-info">
					<text class="record-title">{{ getIdentityName(record.identity_type) }}申请</text>
					<text class="record-time">{{ formatTime(record.create_time) }}</text>
				</view>
				<view class="record-status" :class="getStatusClass(record.status)">
					{{ getStatusText(record.status) }}
				</view>
			</view>
		</view>
		
		<!-- 申请确认弹窗 -->
		<u-modal 
			v-model="showApplyModal" 
			title="确认申请"
			:show-cancel-button="true"
			@confirm="confirmApply"
			@cancel="showApplyModal = false"
		>
			<view class="modal-content">
				<text class="modal-text">确认申请成为{{ getIdentityName(selectedIdentity) }}？</text>
				<text class="modal-fee" v-if="getApplyFee(selectedIdentity) > 0">
					需要支付申请费用：¥{{ getApplyFee(selectedIdentity) }}
				</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
import api from '@/api/index.js'

export default {
	data() {
		return {
			userIdentity: null, // 当前用户身份
			applyRecords: [], // 申请记录
			showApplyModal: false,
			selectedIdentity: '',
			loading: false
		}
	},
	
	onLoad() {
		this.loadUserIdentity()
		this.loadApplyRecords()
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载用户身份信息
		async loadUserIdentity() {
			try {
				const res = await api.identityApi.getIdentityInfo()
				if (res.r === 0 && res.data) {
					this.userIdentity = res.data
				}
			} catch (error) {
				console.error('加载身份信息失败:', error)
			}
		},
		
		// 加载申请记录
		async loadApplyRecords() {
			try {
				const res = await api.identityApi.getApplyRecords()
				if (res.r === 0) {
					this.applyRecords = res.data.list || []
				}
			} catch (error) {
				console.error('加载申请记录失败:', error)
			}
		},
		
		// 申请身份
		applyIdentity(identityType) {
			// 检查是否已经是该身份
			if (this.userIdentity && this.userIdentity.level === identityType) {
				uni.showToast({
					title: '您已经是该身份',
					icon: 'none'
				})
				return
			}
			
			// 检查是否有待审核的申请
			const pendingApply = this.applyRecords.find(record => 
				record.identity_type === identityType && record.status === 0
			)
			if (pendingApply) {
				uni.showToast({
					title: '您已提交申请，请等待审核',
					icon: 'none'
				})
				return
			}
			
			this.selectedIdentity = identityType
			this.showApplyModal = true
		},
		
		// 确认申请
		async confirmApply() {
			if (this.loading) return
			
			this.loading = true
			this.showApplyModal = false
			
			try {
				const res = await api.identityApi.submitApply({
					identity_type: this.selectedIdentity
				})
				
				if (res.r === 0) {
					uni.showToast({
						title: '申请提交成功',
						icon: 'success'
					})
					
					// 重新加载申请记录
					this.loadApplyRecords()
				} else {
					uni.showToast({
						title: res.msg || '申请失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('申请失败:', error)
				uni.showToast({
					title: '申请失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 获取身份名称
		getIdentityName(level) {
			const names = {
				cloud_owner: '云主',
				partner: '合伙人',
				businessman: '商家',
				supplier: '供应商',
				agent: '代理'
			}
			return names[level] || '普通用户'
		},
		
		// 获取申请费用
		getApplyFee(identityType) {
			const fees = {
				cloud_owner: 999,
				partner: 599,
				businessman: 299,
				supplier: 199,
				agent: 0
			}
			return fees[identityType] || 0
		},
		
		// 获取状态文本
		getStatusText(status) {
			const texts = {
				0: '待审核',
				1: '已通过',
				2: '已拒绝'
			}
			return texts[status] || '未知'
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const classes = {
				0: 'pending',
				1: 'approved',
				2: 'rejected'
			}
			return classes[status] || ''
		},
		
		// 格式化时间
		formatTime(timestamp) {
			if (!timestamp) return ''
			
			const date = new Date(timestamp * 1000)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			
			return `${year}-${month}-${day}`
		}
	}
}
</script>

<style scoped>
.identity-apply {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 当前身份信息 */
.current-identity {
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.identity-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	color: #fff;
}

.identity-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.identity-title {
	font-size: 32rpx;
	font-weight: bold;
}

.identity-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	background-color: rgba(255, 255, 255, 0.2);
}

.identity-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-text {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 申请列表 */
.apply-list {
	padding: 0 20rpx;
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.apply-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.item-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.item-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-icon.cloud-owner {
	background: linear-gradient(135deg, #ffd700, #ffb347);
}

.item-icon.partner {
	background: linear-gradient(135deg, #667eea, #764ba2);
}

.item-icon.businessman {
	background: linear-gradient(135deg, #52c41a, #73d13d);
}

.item-icon.supplier {
	background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.item-icon.agent {
	background: linear-gradient(135deg, #fa8c16, #ffa940);
}

.item-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.item-desc {
	font-size: 24rpx;
	color: #666;
}

.item-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.apply-fee {
	font-size: 28rpx;
	font-weight: bold;
	color: #ff4d4f;
}

/* 申请记录 */
.apply-records {
	padding: 0 20rpx;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.record-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.record-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

.record-status {
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
}

.record-status.pending {
	color: #fa8c16;
	background-color: #fff7e6;
}

.record-status.approved {
	color: #52c41a;
	background-color: #f6ffed;
}

.record-status.rejected {
	color: #ff4d4f;
	background-color: #fff2f0;
}

/* 弹窗内容 */
.modal-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 20rpx 0;
}

.modal-text {
	font-size: 28rpx;
	color: #333;
	text-align: center;
}

.modal-fee {
	font-size: 26rpx;
	color: #ff4d4f;
	text-align: center;
	font-weight: bold;
}
</style>